<template>
  <div class="dashboard-editor-container">
    <div>
      <el-card>
        <el-form :model="ruleForm" style="margin-top:10px;" size="mini" label-position="top" ref="ruleForm">
          <el-row :gutter="10">
            <el-col :lg="4" :md="6">
              <el-form-item label="批次号" prop='BATCHNO'>
                <!-- <el-select v-model="ruleForm.BATCHNO" size="mini" clearable placeholder="请选择批次号">
                <el-option v-for="item in batchOption" :key="item.BATCHNO" :label="item.BATCHNO"
                  :value="item.BATCHNO"></el-option>
              </el-select> -->
                <el-input size="mini" placeholder="请输入批次号" v-model="ruleForm.BATCHNO"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item label="开始日期" prop="BATCHBEGINDATA">
                <el-date-picker size="mini" style="width:100%;" v-model="ruleForm.BATCHBEGINDATA" type="date"
                  value-format="yyyyMMdd" :clearable='false' placeholder="开始日期" :picker-options="pickerOptionsStart"
                  @change="changeStart">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item label="结束日期" prop="BATCHENDDATA">
                <el-date-picker style="width:100%;" size="mini" v-model="ruleForm.BATCHENDDATA" type="date"
                  value-format="yyyyMMdd" placeholder="结束日期" :picker-options="pickerOptionsEnd" @change="changeEnd"
                  :clearable='false'>
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item label="采集方式" prop="COLLECTFLAG">
                <el-select v-model="ruleForm.COLLECTFLAG" size="mini" clearable placeholder="请选择采集方式">
                  <el-option label="人工" value="1"></el-option>
                  <el-option label="自动" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="6" :md="9" class="searchBtnMarginTop" :offset="2">
              <el-button type="primary" icon="el-icon-search" :loading="loading" size="mini" @click="queryDetail">查询
              </el-button>
              <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('ruleForm')">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <el-row style="margin-top:20px" >
      <el-col>
        <el-card>
          <el-table :data="tableData" border highlight-current-row  ref="tableData">
            <el-table-column prop='BATCHNO' label='批次号' width="100"></el-table-column>
            <el-table-column prop='BATCHDATE' label='批次日期'align="center"  width="100"></el-table-column>
            <el-table-column prop='CHANNELTYPE' label='渠道类型' align="center"></el-table-column>
            <el-table-column prop='SESSIONID' label='会话ID'  width="100" align="center"></el-table-column>
            <el-table-column prop='MEDIATYPE' label='多媒体类型' align="center" width="100"></el-table-column>
            <el-table-column prop='BEGINTIME' label='会话开始时间' align="center" width="110"></el-table-column>
            <el-table-column prop='ENDTIME' label='会话结束时间' align="center" width="110"></el-table-column>
            <el-table-column prop='SESSIONTIME' label='会话持续时长' align="center" width="110"></el-table-column>
            <el-table-column prop='BRNO' label='机构号' align="center"></el-table-column>
            <el-table-column prop='CUSTEVAUATE' label='满意度' align="center"></el-table-column>
            <el-table-column prop='BUSINESSTYPE' label='业务类型' align="center"></el-table-column>
            <el-table-column prop='COLLECTFLAG' label='采集方式' align="center"></el-table-column>
            <el-table-column prop='FILEPATH' label='文件路径' width="180" align="center"></el-table-column>
            <el-table-column prop='SAMPLEFLAG' label='抽样标识' align="center"></el-table-column>
            <el-table-column prop='CUSTOMER' label='客户姓名' align="center"></el-table-column>
            <el-table-column prop='CUSTOMLEVEL' label='客户等级'align="center"></el-table-column>
            <el-table-column prop='TELNUMBER' label='电话号码' align="center"></el-table-column>
            <el-table-column prop='CUSTOMIDTYPE' label='客户身份证类型' align="center" width="120" ></el-table-column>
            <el-table-column prop='CUSTOMIDNO' label='客户身份证号' align="center" width="140" ></el-table-column>
            <el-table-column prop='CALLTYPE' label='呼叫类型' align="center"></el-table-column>
            <el-table-column prop='AREA' label='运营地区' align="center"></el-table-column>
            <el-table-column prop='AGENTID' label='坐席ID' align="center"></el-table-column>
            <el-table-column prop='AGENTNAME' label='坐席姓名'align="center"></el-table-column>
            <el-table-column prop='AGENTLEVEL' label='坐席星级' align="center"></el-table-column>
            <el-table-column prop='EXTNO' label='分机号' align="center"></el-table-column>
            <el-table-column prop='TEAM' label='班组' align="center"></el-table-column>
            <el-table-column prop='SKILL' label='技能组' align="center"></el-table-column>
            <el-table-column label='操作' fixed="right" align="center">
              <template slot-scope="scope">
                <div>
                  <el-button type="danger" size="mini" @click="delDetail(scope.row)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align:right;margin-top:20px;" v-show="this.tableData">
            <el-pagination :current-page="currentPage" background @size-change="handleSizeChange"
              :page-sizes="[10,25,50,100]" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper"
              :total="tableTotal" @current-change="changePage"></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  // 发送接口
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import request from "@/common/utils/requestQC";
  import dataCollectedDetail from "@/message/QCManage/dataCollectionManage/dataCollectedDetail/dataCollectedDetail";
  import toolBox from "@/common/utils/toolBox";

  //批量上传
  export default {
    name: '',
    data() {
      return {
        fileUrl: getGlobalParams.get("FileDownloadAddress"),
        pickerOptionsStart: {
          disabledDate: (time) => {
            return time.getTime() > Date.now()
          }
        },
        pickerOptionsEnd: {
          disabledDate: (time) => {
            return time.getTime() > Date.now()
          }
        },
        tableTotal: 0,
        pageSize: undefined,
        currentPage: 1, //表格当前页
        tableData: [],
        ruleForm: {
          BATCHNO: '', //批次号
          BATCHBEGINDATA: '',
          BATCHENDDATA: '',
          COLLECTFLAG: '',
        },
        loading: false,
      }
    },
    computed: {},
    created() {
      this.pageSize = getGlobalParams.get("PageSize");
    },
    mounted() {
      if(this.$route.params.row!=undefined){
        this.getParams()
      }else{
        this.ruleForm = {
          BATCHNO: '', //批次号
          BATCHBEGINDATA: this.getDay(-30),
          BATCHENDDATA: this.getDay(0),
          COLLECTFLAG: '',
        },
        this.queryDetail()
      }
      // this.getParams()
    },
    watch: {},
    methods: {
      getParams(){
         let row = this.$route.params.row;
         this.ruleForm.BATCHNO = row.BATCHNO
         this.ruleForm.BATCHBEGINDATA = row.BATCHDATE
         this.ruleForm.BATCHENDDATA = this.getDay(0)
         this.queryDetail()
      },
      //删除
      delDetail(row){
         this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let resBody = new dataCollectedDetail()
          resBody.data.BATCHNO = row.BATCHNO
          resBody.data.CurrPage = this.currentPage
          resBody.data.PageRowNum = this.pageSize
          resBody.data.OPERAFLAG = '0'
          let response = await request(resBody);
          if (response.SYS_HEAD.ReturnCode == "000000") {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.queryDetail()
          } else {
            this.$message({
              type: "error",
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 查询数据采集明细
      async queryDetail() {
        let resBody = new dataCollectedDetail()
        resBody.data.BATCHNO = this.ruleForm.BATCHNO
        resBody.data.BATCHBEGINDATA = this.ruleForm.BATCHBEGINDATA
        resBody.data.BATCHENDDATA = this.ruleForm.BATCHENDDATA
        resBody.data.COLLECTFLAG = this.ruleForm.COLLECTFLAG
        resBody.data.OPERAFLAG = '1'
        resBody.data.CurrPage = this.currentPage
        resBody.data.PageRowNum = this.pageSize
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.tableData = response.BODY.struct
          this.tableTotal = response.BODY.TotalRowNum
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      changePage(val) {
        this.currentPage = val;
        this.queryDetail()
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.queryDetail()
      },
      // 获取当天前一天
      getDay(day) {
        var dd = new Date();
        dd.setDate(dd.getDate() + day);
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
        var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
        return y + "" + m + "" + d;
      },
      //  开始日期
      changeStart() {
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {
            if (this.ruleForm.BATCHBEGINDATA) {
              return time.getTime() < Date.parse(this.ruleForm.BATCHBEGINDATA.slice(0, 4) + '-' + this.ruleForm
                .BATCHBEGINDATA.slice(4, 6) +
                '-' + this.ruleForm.BATCHBEGINDATA.slice(6, 8)) - 8.64e7 || time.getTime() > Date.now();
            } else {
              return time.getTime() > Date.now();
            }
          }
        })
      },
      // 结束日期
      changeEnd() {
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: (time) => {
            if (this.ruleForm.BATCHENDDATA) {
              return time.getTime() > Date.parse(this.ruleForm.BATCHENDDATA.slice(0, 4) + '-' + this.ruleForm
                .BATCHENDDATA
                .slice(4, 6) + '-' +
                this.ruleForm.BATCHENDDATA.slice(6, 8)) || time.getTime() > Date.now();
            } else {
              return time.getTime() > Date.now();
            }
          }
        })
      },
      // 重置查询条件
      clearForm(item) {
        // 重置表格
        this.$refs["" + item].resetFields();
      },
    }
  }

</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
